<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="擅长领域"
        left-text="返回"
        left-arrow
        fixed
        right-text="提交"
        @click-left="onClickLeft"
        @click-right="submit"
      ></van-nav-bar>
    </van-sticky>
    <div class="main">
      <van-checkbox-group v-model="checked" :max="3">
        <van-cell-group inset>
          <van-cell
            v-for="(item, index) in list"
            :key="item"
            clickable
            :title="(item as any).expertCategoryName"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
                :ref="(el: any) => (checkboxRefs[index] = el)"
                :name="item"
                @click.stop
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeUpdate, watch } from 'vue'
import { updateEInquiryItem, getExpertCategory } from './api'
import { useRoute } from 'vue-router'
import { Notify } from 'vant'
export default defineComponent({
  setup() {
    let list = ref([])
    getExpertCategory().then((res) => {
      list.value = res.data.data.records
    })

    const checked = ref([])
    const checkboxRefs = ref<any>([])
    const toggle = (index: any) => {
      checkboxRefs.value[index].toggle()
    }

    onBeforeUpdate(() => {
      checkboxRefs.value = []
    })

    const { submit } = useSubmit(checked)
    return {
      list,
      toggle,
      checked,
      checkboxRefs,
      onClickLeft() {
        history.back()
      },
      submit,
    }
  },
})

function useSubmit(checked: any) {
  const route = useRoute()
  let expertCategoryId = ref('')
  let expertCategoryName = ref('')

  watch(
    () => checked.value,
    () => {
      if (checked.value?.length > 0) {
        if (checked.value.length > 1) {
          let idList: string[] = []
          let nameList: string[] = []
          checked.value.forEach((item: any) => {
            idList.push(item.id)
            nameList.push(item.expertCategoryName)
          })
          expertCategoryId.value = idList.join(',')
          expertCategoryName.value = nameList.join(',')
        } else {
          expertCategoryId.value = checked.value[0].id
          expertCategoryName.value = checked.value[0].expertCategoryName
        }
      }
    }
  )

  const submit = () => {
    if (!(expertCategoryId.value.length > 0)) {
      Notify({ type: 'warning', message: '请至少选择一个擅长领域' })
      return
    }
    let params = {
      id: route.query.id,
      expertCategoryId: expertCategoryId.value,
      expertCategoryName: expertCategoryName.value,
    }
    updateEInquiryItem(params).then((res) => {
      Notify({ type: 'success', message: '修改成功' })
      history.back()
    })
  }

  return {
    submit,
  }
}
</script>

<style lang="less" scoped>
.main {
  padding-top: 46px;
  height: 100vh;

  .submit {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
